<template>
  <vxe-grid v-bind="gridOptions">
    <template #product_identification="{ row }">
      <VGroup v-if="notAdd(row)" class="w-full">
        <SelectImagesTag
          class="w-full"
          v-model="row.images_tag_id"
          placeholder="请选择标签"
          @changeItem="changeItem($event, row)"
          :disabled="handleType == 'view'"
        ></SelectImagesTag>
      </VGroup>
      <el-button v-if="row.type === 'add' && handleType != 'view'" @click="handleAddRow">
        +添加
      </el-button>
    </template>
    <template #role="{ row, rowIndex }">
      <el-select
        v-if="notAdd(row)"
        v-model="row.rule_type"
        collapse-tags
        placeholder="标签绑定角色"
        class="w-full"
        @change="changeRole($event, rowIndex)"
        :disabled="handleType == 'view'"
      >
        <el-option
          v-for="item of ruleTypeText"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </template>
    <template #tag_count="{ row }">
      <el-input
        v-if="notAdd(row)"
        v-model="row.tag_count"
        placeholder="请输入"
        :disabled="handleType == 'view'"
      ></el-input>
    </template>
    <template #score="{ row }">
      <template v-if="notAdd(row)">
        {{ row.images_tag?.score }}
      </template>
    </template>

    <template #total="{ row }">
      <template v-if="notAdd(row)">
        {{ Number(row.images_tag?.score || 0) * Number(row.tag_count || 0) }}
      </template>
    </template>
    <template #is_auto_relation_text="{ row }">
      <template v-if="notAdd(row)">
        {{ row.images_tag?.is_auto_relation_text }}
      </template>
    </template>

    <template #remark="{ row }">
      <el-input
        v-if="notAdd(row)"
        v-model="row.remark"
        placeholder="请输入"
        :disabled="handleType == 'view'"
      ></el-input>
    </template>
    <template #operation="{ row, rowIndex }">
      <el-button
        type="danger"
        link
        v-if="notAdd(row) && handleType != 'view'"
        @click="handleDelete(rowIndex)"
      >
        删除
      </el-button>
    </template>
  </vxe-grid>
</template>
<script setup>
import SelectImagesTag from "@/components/SelectImagesTag";
import { reactive } from "vue";
import { ruleTypeText } from "../data.js";

const emit = defineEmits(["update:modelValue", "changeRole"]);
let handleType = reactive(inject("handleType"));

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

const gridOptions = reactive({
  round: true,
  height: "300",
  autoHidden: true,
  columnConfig: {
    resizable: true,
  },
  loading: false,
  data: [
    {
      type: "add",
    },
  ],
  columns: [
    {
      field: "product_identification",
      title: "任务标签",
      align: "center",
      minWidth: 130,
      slots: { default: "product_identification" },
    },

    {
      field: "role",
      title: "标签绑定角色",
      align: "center",
      minWidth: 120,
      slots: { default: "role" },
    },
    {
      field: "username",
      title: "绩效人员",
      align: "center",
      minWidth: 110,
    },
    {
      field: "tag_count",
      title: "标签数量",
      align: "center",
      minWidth: 90,
      slots: { default: "tag_count" },
    },
    {
      field: "score",
      title: "单个标签分值",
      align: "center",
      width: 110,
      slots: { default: "score" },
    },
    {
      field: "total",
      title: "标签总分值",
      align: "center",
      minWidth: 100,
      slots: { default: "total" },
    },
    {
      field: "is_auto_relation",
      title: "标签来源",
      align: "center",
      minWidth: 90,
      slots: { default: "is_auto_relation_text" },
    },
    {
      title: "操作",
      width: 90,
      align: "center",
      // fixed: 'right',
      slots: { default: "operation" },
    },
  ],
});

const notAdd = (row) => row.type !== "add";
const handleAddRow = () => {
  gridOptions.data.splice(-1, 0, {
    tag_count: 1,
  });
};

const handleDelete = (index) => {
  gridOptions.data.splice(index, 1);
};

const changeRole = (ruleType, index) => {
  emit("changeRole", {
    ruleType,
    index,
  });
};

const changeItem = (item, row) => {
  row.tag_name = item.tag_name;
  row.images_tag = {
    score: item.score,
    is_auto_relation: item.is_auto_relation,
    is_auto_relation_text: item.is_auto_relation_text,
    tag_type: 2,
  };
};

onMounted(() => {
  gridOptions.data = props.modelValue;
  // gridOptions.data.splice(-1, 0, {
  //   type: "add",
  //   images_tag:{}
  // })
  watch(
    () => gridOptions.data,
    (newValue, oldValue) => {
      if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
        emit("update:modelValue", newValue);
      }
    },
    { deep: true }
  );

  watch(
    () => props.modelValue,
    (newValue, oldValue) => {
      if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
        gridOptions.data = newValue;
      }
    },
    { deep: true }
  );
});
</script>
<style lang="scss">
.pictureTitle {
  position: relative;
  padding-left: 6px;
  font-size: 16px;
  color: var(--base-sub-text-color);

  &::after {
    content: "";
    height: 14px;
    width: 2px;
    position: absolute;
    left: 0;
    top: 4px;
    align-items: center;
    background-color: #3366f1;
  }
}
</style>
